<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>交易管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="../../../static/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="../../../static/css/public.css" media="all" />
	<style>
		.chart-div{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			min-height: 50%;
			height: auto;
			background: #FFFFFF;
		}
		.chart-div2{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			min-height: 50%;
			height: auto;
			background: #FFFFFF;
		}
	</style>
</head>
<body class="childrenBody">
<div id="fundChart" class="chart-div"></div>
<div id="fundChart2" class="chart-div2"></div>
<script type="text/javascript" src="../../../static/layui/layui.js"></script>
<script type="text/javascript" src="../../../static/echarts/echarts.min.js"></script>
<script type="text/javascript">
	layui.use(['form','layer','jquery'],function(){
		$ = layui.jquery;
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('fundChart'));
		var colors = ['#5793f3', '#d14a61', '#675bba'];
		option = {
			color: colors,

			tooltip: {
				trigger: 'none',
				axisPointer: {
					type: 'cross'
				}
			},
			legend: {
				data:['2015 降水量', '2016 降水量']
			},
			grid: {
				top: 70,
				bottom: 50
			},
			xAxis: [
				{
					type: 'category',
					axisTick: {
						alignWithLabel: true
					},
					axisLine: {
						onZero: false,
						lineStyle: {
							color: colors[1]
						}
					},
					axisPointer: {
						label: {
							formatter: function (params) {
								return '降水量  ' + params.value
										+ (params.seriesData.length ? '：' + params.seriesData[0].data : '');
							}
						}
					},
					data: ['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12']
				},
				{
					type: 'category',
					axisTick: {
						alignWithLabel: true
					},
					axisLine: {
						onZero: false,
						lineStyle: {
							color: colors[0]
						}
					},
					axisPointer: {
						label: {
							formatter: function (params) {
								return '降水量  ' + params.value
										+ (params.seriesData.length ? '：' + params.seriesData[0].data : '');
							}
						}
					},
					data: ['2015-1', '2015-2', '2015-3', '2015-4', '2015-5', '2015-6', '2015-7', '2015-8', '2015-9', '2015-10', '2015-11', '2015-12']
				}
			],
			yAxis: [
				{
					type: 'value'
				}
			],
			series: [
				{
					name: '2015 降水量',
					type: 'line',
					xAxisIndex: 1,
					smooth: true,
					data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
				},
				{
					name: '2016 降水量',
					type: 'line',
					smooth: true,
					data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]
				}
			]
		};
		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);

		var myChart2 = echarts.init(document.getElementById('fundChart2'));
		date_option = {
			legend: {},
			tooltip: {},
			xAxis: {type: 'category'},
			yAxis: {},
			series: [
				{type: 'bar'},
				{type: 'bar'},
			]
		};
		myChart2.setOption(date_option);
		myChart2.showLoading();    //数据加载完之前先显示一段简单的loading动画
		$.ajax({
			type : "post",
			async : true,//异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
			url : "/fund/redoAllPctChart",//请求发送到TestServlet处
			data : {},
			dataType : "json",        //返回数据形式为json
			success : function(result) {
				//请求成功时执行该函数内容，result即为服务器返回的json对象
				if (result) {
					myChart2.hideLoading();    //隐藏加载动画
					myChart2.setOption({        //加载数据图表
						dataset: result.data
					});
				}
			},
			error : function(errorMsg) {
				//请求失败时执行该函数
				layer.msg("图表请求数据失败!");
				myChart2.hideLoading();
			}
		})
	})
</script>
</body>
</html>